<template>
    <div class="box">
        <h3>vue-router模块的加载和使用</h3>
        <p>1.自动化路由模块加载安装:在项目初始化阶段(vue create),通过选择路由模块完成安装和文件的自动配置</p>
        <hr>
        <h3>2.手动安装路由模块并定义路由配置文件(后续的项目开发中不会用的)</h3>
        <ul>
            <li>安装路由模块: npm install vue-router -S|--save 【如果vue核心库为2.0版本，路由模块最高支持到3.0】</li>
            <li>路由模块创建和加载:
                <ul>
                    <li>在创建路由模块的文件中使用 import { createRouter } from "vueRouter" 加载路由构建方法</li>
                    <li>通过执行 createRouter 方法构建路由对象，但该方法必须提供相关配置【options api 规则】</li>
                    <li>
                        在main.js项目启动引导文件中完成路由模块的导入和加载;导入的模块为vue插件对象数据，通过 .use 方法完成集成
                        <br>
                        路由集成过程中，程序运行可能会出现错误，因为createRouter方法调用时，必须提供 history 和 routes 选项配置
                        <br>
                        + history 路由模式配置【后续课程详细讲解】; 最简单取值 路由模块提供 createWebHashHistory() <br>
                        + routes 路由表配置【后续课程详细讲解】；最简单取值 []
                    </li>
                </ul>
            </li>
            <li>路由功能的使用:
                <ul>
                    <li>使用路由模块提供的内置组件 ＜router-view＞ 取代动态组件 ＜component＞</li>
                    <li>
                        所有需要以地址方式操作的vue组件页面，统一由路由配置 routes 进行统一管理 <br>
                        管理 页面组件和地址的对应关系 <br>
                        <pre>
                            routes:[
                                {
                                    path:描述路径,
                                    component:描述组件
                                },
                                ……
                            ]
                        </pre>
                    </li>
                    <li>
                        项目中使用由路由模块提供的内置组件 ＜router-link＞＜router-link＞ 完成地址切换
                        <ul>
                            <li>该组件必须绑定 to 属性，取值为路由表定义的组件地址</li>
                            <li>该组件渲染的默认标签是 a 标签 </li>
                            <li>
                                如果需要渲染的标签不是a标签，首先需要完成 custom 布尔类型属性的定义； <br>
                                通过v-slot的默认作用域解构分发，获取导航方法 navigate 【 v-slot:default="{ navigate }" 】<br>
                                在自定义分发标签上以v-on完成事件绑定，取值 navigate 导航回调函数 <br>
                                需要注意：如果未使用custom属性，会出现分发标签被包裹在 a 标签内部的情况 <br>
                                <pre>
                                    ＜RouterLink v-else ：to="nav.page" custom ＃default="{ navigate }"＞
                                        ＜span ＠click="navigate"＞{ { nav.name } }＜/span＞
                                    ＜/RouterLink＞
                                </pre>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</template>

<script setup>

</script>

<style lang="sass" scoped>

</style>